<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app"></div>
  <script src="../dist/vue.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -->
  <script>
    // Vue.mixin 混合 可以混入一些公共方法 这是全局混入
    /*
    发布订阅模式
    */
    Vue.mixin({
      created() {
        console.log("created------------1")
      },
    });
    Vue.mixin({
      created() {
        console.log("created------------2")
      },
      mounted() {
        console.log("mounted------------1")
      },
    });
    console.log(Vue.options)
    const app = new Vue({
      // data 可以是对象 也可以是函数
      data() {
        return {
          name: "vue2",
          age: 2015,
          backgroundColor: "skyblue"
        }
      },
      beforeCreate() {
        console.log("beforeCreate------------1")
      },
      // 挂载的dom元素
      el: "#app",
      template: `
      <div id="app" style="color:red;background-color:skyblue;" abc a=b>
        我是普通文本div
        <h2 key="hh" id="h2">{{name}} --- {{age}}---</h2>
        <br/>
        <span class="span1">{{age}}</span>
      </div>
      `,
      // 混入 mixin 这里混入将是局部
      // mixins:[]
    });
  </script>
</body>

</html>